﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Easyui扩展库 Treegrid - 落阳 整理</title>
    <link href="http://www.easyui-extlib.com/Content/Site.css" rel="stylesheet" />
    <script src="http://www.easyui-extlib.com/Scripts/jquery/jquery-1.11.0.min.js"></script>
    <script src="http://www.easyui-extlib.com/Scripts/jquery-extensions/jquery.jdirk.js"></script>
    <link href="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/themes/default/easyui.css" rel="stylesheet" />
    <link href="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/themes/icon.css" rel="stylesheet" />
    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>

    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui-extensions/treegrid/jeasyui.extensions.treegrid.getRowInfo.js"></script>
    <script>
    $(function () {
        var getFrozenColumns = function () {
            var result = [];

            var c1 = [];
            c1.push({ field: 'AreaName', title: '地区', width: 150 });
            c1.push({ field: 'ID', title: '主键', width: 100 });
            c1.push({ field: 'Sex1', title: '男', width: 90 });
            c1.push({ field: 'Sex2', title: '女', width: 90 });

            result.push(c1);

            return result;
        };

        var getColumns = function () {
            var result = [];

            var normal = [
                { field: 'TS1', title: '测试1', width: 60 },
                { field: 'TS2', title: '测试2', width: 60 }
            ];
            result.push(normal);

            return result;
        };
        var options = {
            title: "列表",
            idField: "ID",
            treeField: "AreaName",
            rownumbers: true,
            fit: true,
            border: false,
            singleSelect: true,
            toolbar: [
                {
                    iconCls: 'icon-add',
                    text: "获取所有数据行（含子集）",
                    handler: function () {
                        var rows = $("#tg1").treegrid("getRows", true);
                        console.log(rows);
                        $.messager.alert("数据返回", rows ? "获取数据行共[" + rows.length + "]条，具体数据请F12查看控制台" : "未获取到数据行");
                    }
                },
                {
                    iconCls: 'icon-add',
                    text: "获取女性数量大于50的第一个数据行",
                    handler: function () {
                        var rows = $("#tg1").treegrid("getNode", function (row, index, rows) { return row.Sex2 > 50; });
                        console.log(rows);
                        $.messager.alert("数据返回", rows ? "获取数据行1条，具体数据请F12查看控制台" : "未获取到数据行");
                    }
                },
                {
                    iconCls: 'icon-add',
                    text: "获取男性数量大于50的数据行",
                    handler: function () {
                        var rows = $("#tg1").treegrid("getNodes", function (row, index, rows) { return row.Sex1 > 50; });
                        console.log(rows);
                        $.messager.alert("数据返回", rows ? "获取数据行共[" + rows.length + "]条，具体数据请F12查看控制台" : "未获取到数据行");
                    }
                },
                '-',
                {
                    iconCls: 'icon-add',
                    text: "获取[深圳]数据行的上一行、下一行",
                    handler: function () {
                        var nbId = 6;
                        var prev = $("#tg1").treegrid("prevRow", nbId), next = $("#tg1").treegrid("nextRow", nbId);

                        console.log("深圳数据的上一行数据对象：");
                        console.log(prev);
                        console.log("深圳数据的下一行数据对象：");
                        console.log(next);
                        $.messager.alert("数据返回", (prev && next) ? "已获取到上一行/下一行数据行对象，具体数据请F12查看控制台" : "未获取到上一行/下一行数据行对象");
                    }
                },
                {
                    iconCls: 'icon-add',
                    text: "获取[杭州]数据行的同级数据行",
                    handler: function () {
                        var nbId = 100;
                        var nears = $("#tg1").treegrid("getNears", nbId);

                        console.log("[杭州]数据行的同级数据行：");
                        console.log(nears);
                        $.messager.alert("数据返回", nears.length ? "获取数据行共[" + nears.length + "]个，具体数据请F12查看控制台" : "未获取到数据行");
                    }
                },
                {
                    iconCls: 'icon-add',
                    text: "获取[浙江]下一级同级数据行",
                    handler: function () {
                        var nbId = 1;
                        var nears = $("#tg1").treegrid("getNearChildren", nbId);

                        console.log("[浙江]下一级同级数据行：");
                        console.log(nears);
                        $.messager.alert("数据返回", nears.length ? "获取数据行共[" + nears.length + "]个，具体数据请F12查看控制台" : "未获取到数据行");
                    }
                },
                '-',
                {
                    iconCls: 'icon-add',
                    text: "获取[浙江]数据行元素对象",
                    handler: function () {
                        var doms = $("#tg1").treegrid("getRowDom", { id: "1", cascade: false });
                        console.log(doms);
                        $.messager.alert("数据返回", doms ? "获取数据行元素对象共[" + doms.length + "]个，具体数据请F12查看控制台" : "未获取到数据行元素对象");
                    }
                }
            ],
            frozenColumns: getFrozenColumns(),
            columns: getColumns(),
            method: "get",
            url: "treegrid-common-data.json"
        };

        $("#tg1").treegrid(options);
    });
    </script>
</head>
<body>
    <div class="easyui-panel" data-options="fit:true,border:false">
        <table id="tg1"></table>
    </div>
</body>
</html>
